<template>
  <a-modal
    :visible="visible"
    centered
    :width="800"
    :closable="false"
    :keyboard="false"
    :maskClosable="false"
    @cancel="onClose"
    @ok="onOk"
    :bodyStyle="{
      overFlow: 'hidden',
      padding: 0,
    }"
  >
    <template #title> 选择素材 </template>
    <div class="modal-wrapper">
      <a-tabs v-model:value:activeKey="currentTab" style="padding-top: 10px">
        <a-tab-pane :key="1" tab="项目素材"></a-tab-pane>
        <a-tab-pane :key="2" tab="通用素材"></a-tab-pane>
      </a-tabs>
      <div class="modal-content">
        <div class="modal-content-left">
          <div class="left-content">
            <div v-if="loading" class="tree-empty">
              <a-spin :spinning="loading"></a-spin>
            </div>
            <a-tree
              v-else
              :fieldNames="fieldNames"
              class="draggable-tree"
              v-model:selectedKeys="selectedKeys"
              v-model:expandedKeys="expandedKeys"
              :defaultExpandedKeys="defaultExpandedKeys"
              :tree-data="cateList"
            />
          </div>
        </div>
        <div class="modal-content-right">
          <!-- 一级目录 -->
          <div class="first-level" v-if="currentMaterialId">
            <div class="new-folder">
              <folder-add-outlined />
            </div>
            <div
              class="materia-item"
              @click="enter(item.id)"
              v-for="item in materialList"
              :key="item.id"
            >
              <div class="folder-icon">
                <folder-filled />
              </div>
              <div>{{ item.catalog_name }}</div>
            </div>
          </div>
          <!-- 二级目录 -->
          <div class="second-level" v-if="currentSubMaterialId">
            <div class="second-level-header">
              <div @click="back" style="cursor: pointer">
                <left-outlined />
                <span>返回</span>
              </div>
              <div>已选中123</div>
            </div>
            <div class="mt-10" @click="openUpdateModel">
              <div class="new-folder">
                <folder-add-outlined style="font-size: 18px">
                  上传文件
                </folder-add-outlined>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 上传文件 -->
    <!-- <UploadFileModal
			:visible="materialVisible"
			:type="currentFolder.folder_type"
			:fileData="currentFolder"
			@onCancel="materialVisible = false"
			@onSubmit="closeMaterial"
		/> -->
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  ref,
  nextTick,
} from "vue";

import { Modal, notification, message } from "ant-design-vue";
import { LeftOutlined, FolderFilled } from "@ant-design/icons-vue";
// import UploadFileModal from '../MaterialCenter/modules/UploadFileModal.vue'
let qrCodeTimer = null;
export default defineComponent({
  name: "MaterialLibrary",
  components: { FolderFilled, LeftOutlined },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, context) {
    const state = reactive({
      currentMaterialId: "",
      currentSubMaterialId: "",
      loading: false,
      defaultExpandedKeys: [],
      expandedKeys: [],
      selectedKeys: [],
      currentTab: 1,
      fieldNames: {
        title: "name",
        key: "id",
        children: "catalogs",
      },
      cateList: [], //项目素材分类列表
      materialList: [], //项目素材分类对应的素材列表
      subMaterialList: [],
    });

    const getCatalogList = () => {
      state.loading = true;
      setTimeout(() => {
        state.cateList = [
          {
            id: 43651,
            name: "抖音推荐",
            type: "multi",
            poi: [],
            order: 0,
            top: 3,
            ip_count: -1,
            catalogs: [
              {
                id: 44948,
                name: "项目素材",
              },
            ],
          },
          {
            id: 43461,
            name: "游玩推荐",
            type: "multi",
            poi: [
              {
                id: 94662,
                shop_name: "黄山风景区",
                province: "安徽省",
                city: "黄山市",
                district: "黄山区",
                address: "汤口镇汤泉路1号",
                add_type: 1,
                dy_poi_id: "6601124696236754958",
                dy_poi_url:
                  "https://aweme.snssdk.com/falcon/poi_mwa/poi_detail?poi_id=6601124696236754958",
              },
              {
                id: 94663,
                shop_name: "九华山风景区",
                province: "安徽省",
                city: "池州市",
                district: "青阳县",
                address: "九华镇九华街",
                add_type: 1,
                dy_poi_id: "6601128033350846467",
                dy_poi_url:
                  "https://aweme.snssdk.com/falcon/poi_mwa/poi_detail?poi_id=6601128033350846467",
              },
            ],
            order: 0,
            top: 2,
            ip_count: -1,
            catalogs: [
              {
                id: 44753,
                name: "项目素材",
              },
            ],
          },
          {
            id: 43505,
            name: "吃喝",
            type: "multi",
            poi: [],
            order: 0,
            top: 1,
            ip_count: -1,
            catalogs: [
              {
                id: 44797,
                name: "项目素材",
              },
            ],
          },
          {
            id: 44156,
            name: "东北游玩（雪）",
            type: "multi",
            poi: [],
            order: 0,
            top: 0,
            ip_count: -1,
            catalogs: [
              {
                id: 45707,
                name: "私人",
              },
              {
                id: 45479,
                name: "项目素材",
              },
            ],
          },
        ];

        state.defaultExpandedKeys = [state.cateList[0].id];
        state.expandedKeys = [state.cateList[0].id];
        state.selectedKeys = [state.cateList[0].catalogs[0].id];
        state.defaultExpandedKeys.length &&
          getMaterialList(state.defaultExpandedKeys[0]);
        state.currentMaterialId = state.selectedKeys;
        state.loading = false;
      }, 2000);
    };

    const getMaterialList = (cate_id) => {
      state.materialList = [
        {
          id: 472792,
          type: "video",
          catalog_name: "其他",
          shop_catalog_id: 44948,
          parent_id: 0,
          created_from: "backend",
          shop_id: 43651,
          invisible: "f",
          materials_count: 1,
          created_at: "2023-12-07 15:49:29",
          updated_at: "2023-12-07 15:49:29",
        },
        {
          id: 472791,
          type: "video",
          catalog_name: "商品",
          shop_catalog_id: 44948,
          parent_id: 0,
          created_from: "backend",
          shop_id: 43651,
          invisible: "f",
          materials_count: 0,
          created_at: "2023-12-07 15:49:29",
          updated_at: "2023-12-07 15:49:29",
        },
        {
          id: 472790,
          type: "video",
          catalog_name: "环境",
          shop_catalog_id: 44948,
          parent_id: 0,
          created_from: "backend",
          shop_id: 43651,
          invisible: "f",
          materials_count: 0,
          created_at: "2023-12-07 15:49:29",
          updated_at: "2023-12-07 15:49:29",
        },
        {
          id: 472789,
          type: "video",
          catalog_name: "门头",
          shop_catalog_id: 44948,
          parent_id: 0,
          created_from: "backend",
          shop_id: 43651,
          invisible: "f",
          materials_count: 0,
          created_at: "2023-12-07 15:49:29",
          updated_at: "2023-12-07 15:49:29",
        },
      ];
    };

    const getSubMaterialList = (id) => {
      state.subMaterialList = [
        {
          material_id: "325245052610287536",
          material_name: "cscs.mp4",
          material_catalog_id: 472792,
          shop_id: 43651,
          shop_catalog_id: 44948,
          job_id: null,
          cut_config: {
            end: null,
            start: null,
          },
          material_size: 2060813,
          material_duration: 15013,
          material_convert_status: null,
          material_converted_at: null,
          origin_stream: {
            refs: 1,
            tags: {
              language: "und",
              vendor_id: "[0][0][0][0]",
              handler_name: "Core Media Video",
              creation_time: "2021-06-01T02:39:49.000000Z",
            },
            index: 0,
            level: 31,
            width: 960,
            height: 544,
            is_avc: "true",
            pix_fmt: "yuv420p",
            profile: "High",
            bit_rate: "1043707",
            duration: "15.013333",
            codec_tag: "0x31637661",
            nb_frames: "442",
            start_pts: 0,
            time_base: "1/600",
            codec_name: "h264",
            codec_type: "video",
            start_time: "0.000000",
            coded_width: 960,
            color_range: "tv",
            color_space: "bt709",
            disposition: {
              dub: 0,
              forced: 0,
              lyrics: 0,
              comment: 0,
              default: 1,
              karaoke: 0,
              original: 0,
              attached_pic: 0,
              clean_effects: 0,
              visual_impaired: 0,
              hearing_impaired: 0,
              timed_thumbnails: 0,
            },
            duration_ts: 9008,
            coded_height: 544,
            has_b_frames: 1,
            r_frame_rate: "30000/1001",
            avg_frame_rate: "16575/563",
            color_transfer: "bt709",
            chroma_location: "left",
            closed_captions: 0,
            codec_long_name: "H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10",
            color_primaries: "bt709",
            nal_length_size: "4",
            codec_tag_string: "avc1",
            bits_per_raw_sample: "8",
          },
          material_convert_path: null,
          material_path:
            "/s/20231213/material/XoYO4R/mp4/808e90ecbbb04754ec99101192074e0b.mp4",
          usage_count: 0,
          material_type: "video",
          material_extension: "mp4",
          width: 960,
          height: 544,
          audio_parse_status: "default",
          video_ratio_modify: true,
          site_id: 5200,
          source_id: 0,
          publish_times: 0,
          is_used: 0,
          updated_at: "2023-12-13 11:00:39",
          created_at: "2023-12-13 11:00:39",
          user_id: 8676,
          upload_from: "backend",
          material_url:
            "https://vod.jukeyinqing.com/s/20231213/material/XoYO4R/mp4/808e90ecbbb04754ec99101192074e0b.mp4",
          material_origin_duration: 15013,
          is_full_video: false,
          audio_parse: null,
        },
      ];
      state.currentSubMaterialId = id;
    };
    const enter = (id) => {
      state.currentMaterialId = "";
      getSubMaterialList(id);
    };
    const back = () => {
      state.currentMaterialId = state.currentSubMaterialId;
      state.currentSubMaterialId = "";
      getMaterialList();
    };
    watch(
      () => props.visible,
      (val) => {
        val && getCatalogList();
      }
    );
    const loadData = (e) => {
      console.log(e);
    };
    const onClose = () => {
      context.emit("cancel");
    };
    const onOk = () => {
      context.emit("ok");
    };
    return {
      ...toRefs(state),
      onClose,
      onOk,
      loadData,
      enter,
      back,
      // openUpdateModel,
      // materialVisible
    };
  },
});
</script>

<style lang="less" scoped>
button {
  border-radius: 5px;
}

:deep(.ss-select-selector) {
  border-radius: 0 5px 5px 0 !important;
}
.textarea-wrapper {
  border-radius: 5px;
}
input {
  border-radius: 5px;
}
:deep(.ss-card) {
  border-radius: 15px;
}
.modal-content {
  display: flex;
}
.left-content {
  width: 200px;
  height: 400px;
}
.modal-wrapper {
  padding: 20px;
}
.ss-modal-header {
  border-bottom: 0 !important;
}
.modal-content-right {
  width: calc(100% - 200px);
  box-sizing: border-box;
  padding: 0 20px;
  border-left: 1px solid #e8e8e8;
}
.first-level {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.new-folder {
  width: 120px;
  height: 120px;
  border: 1px dashed #e8e8e8;
  border-radius: 5px;
}
.materia-item {
  display: flex;
  flex-direction: column;

  align-items: center;

  cursor: pointer;
  width: 120px;
  height: 120px;
  border-radius: 5px;
}
.materia-item:hover {
  background-color: #e8e8e8;
}
.tree-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.folder-icon {
  font-size: 50px;
  color: #ffc935;
  height: 56%;
}
.second-level-header {
  display: flex;
  justify-content: space-between;
}
</style>
